{% extends "base.html" %} {% load staticfiles %}

{% block title %} 登录 {% endblock title %}
{% block content %}
<div class="container">
    <div class="row">
        <div class="col-12">
            <br>
            <form method="post" action=".">
                {% csrf_token %}
                <!-- 账号 -->
                <div class="form-group">
                    <label for="username">账号</label>
                    <input type="text" class="form-control" id="username" name="username">
                </div>
                <!-- 密码 -->
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password" name="password">
                </div>
                <div class="col-12">
                    <br>
                    <h5>还没有账号？</h5>
                    <h5>点击<a href='{% url "userprofile:register" %}'>注册账号</a>加入我们吧！</h5>

{#                    第三方登录#}
                    <div>
                        <span style="
    border: none;
    display: inline-block;
    outline: 0;
    padding: 2px 10px;
    margin-top: 15px;
    margin-bottom: 10px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background-color: yellowgreen;
    text-align: center;
    transition: .2s ease-out;
    cursor: not-allowed;
    white-space: nowrap;
    font-family: '微软雅黑';
    border-radius: 2px;
"
                        >第三方登陆 </span>

                        <a target="_blank" href="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101978535&redirect_uri=http://www.bodexiong.vip/api/auth/qq&state=myblog">
                            <img src="http://tuchuang-bode135.oss-cn-beijing.aliyuncs.com/img/qq1.png" alt="使用QQ登录" />
                        </a>
                        <a>
                            <img src="https://tuchuang-bode135.oss-cn-beijing.aliyuncs.com/img/gitee.png" alt="使用Gitee登录" height="20" width="60">
                        </a>
                    </div>

                    <br>

<!--                    wangeditor-->
<!--                    <div id="div1">-->
<!--                        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>-->
<!--                    </div>-->

<!--                    &lt;!&ndash; 引入 wangEditor.min.js &ndash;&gt;-->
<!--                    <script type="text/javascript">-->
<!--                        const E = window.wangEditor-->
<!--                        const editor = new E('#div1')-->
<!--                        // 或者 const editor = new E( document.getElementById('div1') )-->
<!--                        editor.create()-->
<!--                    </script>-->

                    <!-- 新增: 忘记密码 -->
                    <br>
                    <h5>忘记密码了？</h5>
                    <h5>点击<a href='{% url "password_reset_recover" %}'>这里</a>重置密码</h5>

                </div>
                <!-- 提交按钮 -->
                <button type="submit" class="btn btn-primary">提交</button>
            </form>
        </div>
    </div>
</div>

{% endblock content %}

